<template>
	<view class="get-head">
		<h3>收益</h3>
		<view class="biaoti">
			<text v-for="(a,y) in biao" :key="y" :index="y" :class="{'selected' : y == selected}" @click="select(y)">{{a}}</text>
		</view>
		<!-- 线 -->
		<view class="xian">
			<view class="cc">
				<text>总产出</text> <view></view>
			</view>
			<view class="fh">
				<text>总托管分红</text> <view></view>
			</view>
		</view>
		
		<swiper :current="selected" @change="current">
			<swiper-item>
				<view class="swiper-item">
					1
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					2
				</view>
			</swiper-item>
		</swiper>
		
		
	</view>
</template>

<script>
	import ech from '../get-echarts/get-echarts.vue'
	export default {
		name:'get-head',
		components:{
			ech
		},
		data() {
			return {
				biao:['FIL','HNT'],
				selected:'0',
			}
		},
		methods:{
			select(x) {
				this.selected = x
			},
			current(e) {
				this.selected = e.detail.current
			},
			goA(){
				console.log(22);
			},
			goB(){
				console.log(333);
			}
		}
	}
</script>

<style>
.get-head{
	width: 100%;
	background: linear-gradient(to bottom, #DCEAFF 0%, #FFFFFF 50%);
	margin-bottom: 20rpx;
	height: 600rpx;
}

	h3{
		text-align: center;
		font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
		
		margin-bottom: 40rpx;
	}
	.biaoti{
		display: flex;
		justify-content: space-evenly;
		font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
		font-weight: bold;
		color: #999999;
	}
	.xian{
		margin-top: 40rpx;
		
		}
		.cc{
			position: relative;
			font-size: .5em;
			color: #005FDB;
			left: 100rpx;
		}
		.cc>view{
			width: 120rpx;
			height: 4rpx;
			background-color: #005FDB;
			position:absolute;
			left: 100rpx;
			top: 12rpx;
		}
		.fh{
			position: relative;
			font-size: .5em;
			color: #a3e786;
			left: 400rpx;
			top: -36rpx;
		}
		.fh>view{
			width: 120rpx;
			height: 4rpx;
			background-color: #a3e786;
			position:absolute;
			left: 140rpx;
			top: 12rpx;
		}
		swiper{
			height: 100vh;
		}
		.selected{
			color: #000000;
			border-bottom: 6rpx solid #005FDB;
		}
		.ech{
			width: 100%;
			height: 400rpx;
		}
		.sheb>h3{
			text-align: left;
			margin-left: 60rpx;
		}
		.sb{
			width: 90%;
			height: 170rpx;
			margin: auto;
			position: relative;
			/* background-color: #4CD964; */
			box-shadow: 0px 10rpx 60rpx rgba(0, 0, 0, 0.06);
		}
		.t1{
			position: absolute;
			margin-top: 40rpx;
			/* font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
			font-weight: 550;
			opacity: .8;
		}
		.t2{
			color: #007AFF;
			margin-right: 20rpx;
		}
		.t3{
			font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
			opacity: .6;
			font-size: .5em;
		}
		.img1{
			width: 140rpx;
			height: 80rpx;
			margin-top: 40rpx;
			margin-right: 40rpx;
			margin-left: 40rpx;
		}
		.img2{
			width: 20rpx;
			height: 20rpx;
			position: absolute;
			right: 40rpx;
			top: 92rpx;
		}
</style>
